<template>
  <div class="app-container">
    <div style="font-size: 25px;">库存盘点</div>
    <el-divider></el-divider>
    <div>
      <el-form ref="form" :model="form"  label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="盘点单号" prop="allocationOrder" style="width: 400px">
              <el-input v-model="inventoryOrder" disabled placeholder="请输入盘点单号" maxlegth="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="盘点仓库" prop="warehouseId" style="width: 400px">
              <el-select
                v-model="form.warehouseId"
                placeholder="请选择出库仓库"
                clearable
                disabled
                size="medium"
                style="width: 320px"
              >
                <el-option
                  v-for="dict in warehouseList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="盘点人" prop="inventoryUser" style="width: 400px">
              <el-input v-model="form.inventoryUser" disabled placeholder="请输入盘点人" maxlegth="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark" style="width: 400px">
              <el-input v-model="form.remark" disabled placeholder="请输入备注" maxlegth="200"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row style="margin-bottom: 20px;">
          <el-col :span="1.5">
            <div style="font-size: 20px; margin-top: 5px">盘点商品</div>
          </el-col>

        </el-row>
        <div style="margin-top:10px;">
          <el-table :data="addGoodsList">
            <el-table-column label="商品ID" align="center" prop="goodId"/>
            <el-table-column label="商品名称" align="center" prop="goodName"/>
            <el-table-column label="仓库名称" align="center" prop="warehouseName"/>
            <el-table-column label="分类" align="center" prop="categoryName"/>
            <el-table-column label="品牌" align="center" prop="brandName"/>
            <el-table-column label="单位" align="center" prop="companyName"/>
            <el-table-column label="盘点前库存" align="center" prop="beforeNum"/>
            <el-table-column label="盘点后库存" align="center" prop="afterNum">
              <div class="item" slot-scope="scope">
                <el-input-number disabled v-model="scope.row.afterNum" controls-position="right"
                                 oninput="value=value.replace(/[^0-9.]/g,'')" :min="1" size="mini" style="width:100px"
                />
              </div>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>


    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 50px;">
      <el-button type="primary" @click="submitForm" v-if="this.type == 1">确认盘点单</el-button>
      <el-button type="primary" @click="close" v-if="this.type == 0">返回</el-button>
    </div>
  </div>


</template>

<script>

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listWarehouse} from "@/api/erp/warehouse";
import {addInventory, delInventory, getInventory, updateInventory, updateInventoryType} from "@/api/erp/inventory";

let stream = require('stream')

export default {
  name: "sale",
  components: {Treeselect},
  dicts: ['erp_payment_type'],
  data() {
    return {
      //盘点状态
      type: null,
      //仓库List
      warehouseList: [],
      //盘点单号
      inventoryOrder: null,
      // 商品信息表格数据
      goodsList: [],
      // 添加的商品信息表格数据
      addGoodsList: [],
      //表单参数
      form: {},
      // 遮罩层
      loading: true,
    };
  },
  created() {
    //查询仓库list
    this.getWarehouse();
    //获取基础数据
    const inventoryId = this.$route.query.id
    this.getFormInfo(inventoryId);
  },

  methods: {

    getFormInfo(id) {
      getInventory(id).then(res => {
        this.form = res.data
        this.inventoryOrder = res.data.inventoryOrder
        this.addGoodsList = res.data.erpInventoryGoodsList
        this.type = res.data.type
      })
    },

    //保存销售订单提交按钮
    submitForm() {
      let inventoryId = this.form.id
      let type = 0
      let _that = this
      this.$modal.confirm('是否确认库存盘点已无误?').then(function() {
        updateInventoryType(inventoryId,type).then(res =>{
          if (res.code == 200){
            _that.$modal.msgSuccess("修改成功");
            _that.close();
          }
        })
      })
    },

    /*查询仓库*/
    getWarehouse() {
      listWarehouse().then(response => {
        this.warehouseList = response.rows;
      });
    },

    //返回上一页商品列表页
    close() {
      this.$router.go(-1);
    },

  }
}

</script>

